<%@ page language="java" contentType="text/html; charset=utf8"
	pageEncoding="utf8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />

<title>企业端页面</title>

</head>
<body>

	<jsp:include page="head.jsp"></jsp:include>

	<div class="container" style="margin-top:60px;margin-bottom:10px;min-height:95%;height:auto;">

		<div class="col-sm-12">
			<div class="panel panel-default">
				<div class="panel-heading">发布新职位</div>

				<div class="panel-body">


					<div class="container">
					
						<div class="row">
							
							<div class="col-sm-8  col-sm-offset-1">
								<!-- 向左便宜一个格子，具体可以用margin来控制 -->
								<div class="page-header">
									<h2>注册</h2>
								</div>
								<!-- form: -->
								<form id="defaultForm" method="post" class="form-horizontal"
									action="${pageContext.request.contextPath}/test/index">

									<div class="form-group">
										<label class="col-sm-3 control-label">全名</label>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="firstName"
												placeholder="First name" />
										</div>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="lastName"
												placeholder="Last name" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-sm-3 control-label">用户名</label>
										<div class="col-sm-5">
											<input type="text" class="form-control" name="username" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-sm-3 control-label">邮箱</label>
										<div class="col-sm-5">
											<input type="text" class="form-control" name="email" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-sm-3 control-label">密码</label>
										<div class="col-sm-5">
											<input type="password" class="form-control" name="password" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-sm-3 control-label">密码确认</label>
										<div class="col-sm-5">
											<input type="password" class="form-control"
												name="confirmPassword" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-sm-3 control-label">Gender</label>
										<div class="col-sm-5">
											<div class="radio">
												<label> <input type="radio" name="gender"
													value="male" /> Male
												</label>
											</div>
											<div class="radio">
												<label> <input type="radio" name="gender"
													value="female" /> Female
												</label>
											</div>
											<div class="radio">
												<label> <input type="radio" name="gender"
													value="other" /> Other
												</label>
											</div>
										</div>
									</div>


						

									<div class="form-group">
										<label class="col-sm-3 control-label">Languages</label>
										<div class="col-sm-5">
											<div class="checkbox">
												<label> <input type="checkbox" name="languages[]"
													value="english" /> English
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="languages[]"
													value="french" /> French
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="languages[]"
													value="german" /> German
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="languages[]"
													value="russian" /> Russian
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="languages[]"
													value="other" /> Other
												</label>
											</div>
										</div>
									</div>

									<div class="form-group">
										<label class="col-sm-3 control-label">Programming
											Languages</label>
										<div class="col-sm-5">
											<div class="checkbox">
												<label> <input type="checkbox" name="programs[]"
													value="net" /> .Net
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="programs[]"
													value="java" /> Java
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="programs[]"
													value="c" /> C/C++
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="programs[]"
													value="php" /> PHP
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="programs[]"
													value="perl" /> Perl
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="programs[]"
													value="ruby" /> Ruby
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="programs[]"
													value="python" /> Python
												</label>
											</div>
											<div class="checkbox">
												<label> <input type="checkbox" name="programs[]"
													value="javascript" /> Javascript
												</label>
											</div>
					
										</div>
									</div>


 					<div class="form-group">
	                            <label class="col-sm-3 control-label"><a href="http://eonasdan.github.io/bootstrap-datetimepicker/">DateTime Picker</a> (MM/DD/YYYY h:m A)</label>
	                            <div class="col-sm-5">
	                                <div id="datetimePicker" class="input-group date">
	                                    <input id="date" type="text" class="form-control"  name="datetimePicker" readonly/>
	                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
	                                </div>
	                            </div>
	                        </div>
	<div class="form-group" style="margin-left:40px;">
							<label for="studyReq" class="col-md-2 control-label">文件：</label>
							<div class="col-md-5">
								<span class="btn btn-success fileinput-button">
				                   <%-- <i class="glyphicon glyphicon-plus"></i>--%>
				                  <%--  <span>Add files...</span>--%>
				                    <input type="file" name="files[]" multiple>
				                </span>
							</div>

						</div>
						
					<div class="form-group" style="margin-left:40px;">
							<label for="studyReq" class="col-md-2 control-label">文件：</label>
							<div class="col-sm-5">
								<!-- 上传控件前端begin -->
							    <div class="input-group">
							    	<input id="lefile" type="file" name="file" style="display:none"><!-- 真正上传的东西 --> 
							      <input type="text" class="form-control" name="fileName" id="fileName" readonly>
							      <span class="input-group-btn">
							        <button class="btn btn-success fileinput-button" type="button"  onclick="$('input[id=lefile]').click();">Browse</button>
							      </span>
							    </div>
							    <!-- 上传控件前端 end-->
							  </div>

						</div>



									<div class="form-group">
										<div class="col-sm-9 col-sm-offset-3">
											<button type="submit" class="btn btn-primary" name="signup"
												value="Sign up">确定</button>
											<button type="button" class="btn btn-info" id="validateBtn">点击验证</button>
											<button type="button" class="btn btn-info" id="resetBtn">重置表单</button>
										</div>
									</div>
								</form>
								<!-- :form -->
							</div>
							
						</div>
					</div>





				</div>
			</div>

		</div>
	</div>
	<!-- 面板end -->

	<jsp:include page="../common/footer.jsp"></jsp:include>

 
<script type="text/javascript">
$(function(){
	//文件上传使文本框显示上传内容
	$('input[id=lefile]').change(function() {  
		$('#fileName').val($(this).val());  
	});  
	/* 时间控件  need*/
    $('#datetimePicker').datetimepicker({minView: "month",format: "yyyy-mm-dd",language: 'zh-CN',autoclose:true});
    
    $('#datetimePicker').on('hide',function(e) {  
        $('#defaultForm').data('bootstrapValidator')  
            .updateStatus('datetimePicker', 'NOT_VALIDATED',null)  
            .validateField('datetimePicker');  
    });  
    /* 时间控件  need*/
    
    $('#defaultForm').bootstrapValidator({
											//        live: 'disabled',
											message : '值不合法',
											feedbackIcons : {
												valid : 'glyphicon glyphicon-ok',
												invalid : 'glyphicon glyphicon-remove',
												validating : 'glyphicon glyphicon-refresh'
											},
											fields : {
												firstName : {
													/* group : '.col-sm-4', */
													validators : {
														notEmpty : {
															message : '不能为空'
														}
													}
												},
												lastName : {
												/* 	group : '.col-sm-4', */
													validators : {
														notEmpty : {
															message : '不能为空'
														}
													}
												},
												username : {
												
													validators : {
														notEmpty : {
															message : '用户名不能为空'
														},
														stringLength : {
															min : 6,
															max : 30,
															message : '长度必须在6到30之间'
														},
														regexp : {
															regexp : /^[a-zA-Z0-9_\.]+$/,
															message : '用户名只能包含大写、小写、数字和下划'
														},
													/* 	remote : {
															type : 'POST',
															url : 'remote.php',
															message : 'The username is not available'
														}, */
														different : {
															field : 'password,confirmPassword',
															message : '用户名与密码不能一致'
														}
													}
												},
												email : {
													validators : {
														notEmpty : {
															message : '邮箱不能为空'
														},
														emailAddress : {
															message : '邮箱格式不正确'
														}
													}
												},
												fileName : {
													validators : {
														notEmpty : {
															message : '文件不能为空'
														}
													}
												},
												password : {
													validators : {
														notEmpty : {
															message : '密码不能为空'
														},
														identical : {
															field : 'confirmPassword',
															message : '两次密码不一致'
														},
														different : {
															field : 'username',
															message : '密码不能与用户名一致'
														}
													}
												},
												confirmPassword : {
													validators : {
														notEmpty : {
															message : '密码确认不能为空'
														},
														identical : {
															field : 'password',
															message : '两次密码不一致'
														},
														different : {
															field : 'username',
															message : '密码不能与用户名一致'
														}
													}
												},
												gender : {
													validators : {
														notEmpty : {
															message : '必选'
														}
													}
												},
												'languages[]' : {
													validators : {
														notEmpty : {
															message : '至少选择一项'
														}
													}
												},
												'programs[]' : {
													validators : {
														choice : {
															min : 2,
															max : 4,
															message : '必须选2个到4个之间'
														}
													}
												},
												  datetimePicker: {
										                validators: {
										                    notEmpty: {
										                        message: '不能为空'
										                    }
										                }
										            }
											}
    });
/* 										
    $('#datetimePicker')
    .on('dp.change dp.show', function(e) {
    	console.info("dfsfdf");
        // Validate the date when user change it
        $('#defaultForm').data('bootstrapValidator').revalidateField('datetimePicker');
        // You also can call it as following:
        // $('#defaultForm').formValidation('revalidateField', 'datetimePicker');
    }); */
    
 
						// Validate the form manually
						$('#validateBtn').click(function() {
							//var t=$('#defaultForm').data('bootstrapValidator').isValid();
							$('#defaultForm').bootstrapValidator('validate');
						});

						$('#resetBtn').click(
								function() {
									
									$('#defaultForm')
											.data('bootstrapValidator')
											.resetForm(true);
								});
					});
</script>

</body>


</html>